<template>
  <div ref="printPaymentBatch" id="printPaymentBatch" style="width: 690px">
      <printPayment
        v-for="(job, index) in printJobs"
        :key="index"
        :project="job.project"
        :task="job.task"
        :payment="job.payment"
        :qualityRecords="job.qualityRecords"
        :comments="job.comments"
        :notifys="job.notifys"
      />
    
  </div>
</template>
<script>
import printJS from 'print-js'
export default {
  props: {
    printJobs: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  components: {
    printPayment: () => import('@/views/workReport/payment/printPayment'),
  },
  data() {
    return {}
  },
  computed: {},
  methods: {
    print() {
      this.$nextTick(()=>{
        printJS({
        printable: 'printPaymentBatch',
        type: 'html',
        targetStyles: ['*'],
        scanStyles: false,
        maxWidth: '690px',
        style:
          '@media print {@page {size:  21cm 29.7cm;}#printContainer {text-align: center;color: black;}#printContainer table {background-color: black;}#printContainer table td {background-color: white;}#printContainer .label {font-size: 14px;text-align: center;font-weight: bold;}.pageTitle {font-size: 21px;font-weight: bold;text-align: center;}table {width: 690px;border-collapse: collapse;}table tr    { page-break-inside:avoid; page-break-after:auto }table tr td {font-size: 14px;height: 30px;  min-width: 110px;word-break: break-all;padding: 5px 5px;text-align: left; border: 1px solid #000;}',
      })
      })
      
    },
  },
  watch: {},
}
</script>
<style scoped>
#printContainer {
  text-align: center;
  color: black;
}

#printContainer table {
  background-color: black;
}

#printContainer table td {
  background-color: white;
}

#printContainer .label {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}

.pageTitle {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}

table {
  width: 690px;
}

table tr td {
  font-size: 14px;
  height: 30px;
  min-width: 110px;
  padding: 5px 5px;
  text-align: left;
  word-break: break-all;
  border: 1px solid #000;
}
</style>
